<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">

  {%- include head.html -%}

  <body>

    {%- include nav.html -%}

    <div class="page">

      <div class="content">

        {%- include breadcrumbs.html title = page.title -%}

        <blockquote class="hl-caption">
          <p>{{- page.title -}}.qml</p>
          <div class="copy">
            <span class="fa-stack" onclick="copy_snippet()">
              <i id="copy-button" class="far fa-copy fa-stack-1x"></i>
              <i id="copy-indicator" class="fas fa-check fa-stack-1x"></i>
            </span>
        </blockquote>

        <div id="copy-container">
          {{- page.content -}}
        </div>

        {%- include page-nav.html -%}

      </div>
    </div>

    <script>
      function copy_snippet() {
        const indicator = document.getElementById ('copy-indicator');
        const container = document.getElementById ('copy-container');
        const copy_text = container.innerText;

        if (navigator.clipboard != undefined) {
          navigator.clipboard.writeText(copy_text).then(function() {
              indicator.classList.add("success");
              setTimeout(function() { indicator.classList.remove("success") }, 1500);
            }, function(err) {
              inidicator.classList.add("error");
              setTimeout(function() { indicator.classList.remove("error") }, 1500);
          });
        }
      }
    </script>

  </body>

</html>
